<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" title="会员卡调账" top="80px" draggable overflow
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <div :id="titleId" :class="titleClass">会员卡调账</div>
                    <div class="header-tip">会员：{{ user.re.mobile }}</div>
                </div>
            </template>
            <el-divider />

            <div class="dialog-content">
                <div class="rule-box">
                    <div class="title">调账规则</div>
                    <div class="content">1、充值调账往卡里加金额；</div>
                    <div class="content">2、消费调账从卡里扣金额；</div>
                    <div class="content">3、支付方式、门店都要与原单对应；</div>
                </div>
                <el-form ref="formRef" :model="form.re" label-width="auto" size="large" style="margin-top: 20px;"
                    :rules="rules">
                    <div class="type-box">
                        <el-form-item label="调账类型：">
                            <div class="button-box">
                                <el-button class="button" :class="{ 'active': isActive === 1 }"
                                    @click="handleType(1)">增加</el-button>
                                <el-button class="button" :class="{ 'active': isActive === 2 }" @click="handleType(2)"
                                    style="margin-left: 22px;">扣减</el-button>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="form">
                        <el-row class="row-bg">
                            <el-col :span="12">
                                <el-form-item label="来源：" prop="source">
                                    <el-select v-model="form.re.source" filterable clearable placeholder="选择来源"
                                        size="large">
                                        <el-option v-for="item in source_options.re" :label="item.name"
                                            :value="item.code" />
                                        <!-- <el-option label="小程序" value="小程序" />
                                        <el-option label="PC收银" value="PC收银" /> -->
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="支付方式：" prop="payType">
                                    <el-select v-model="form.re.payType" filterable clearable placeholder="选择支付方式"
                                        size="large">
                                        <el-option v-for="item in payType_options.re" :label="item.name"
                                            :value="item.code" />
                                        <!-- <el-option label="微信" value="微信" />
                                        <el-option label="支付宝" value="支付宝" />
                                        <el-option label="现金" value="现金" /> -->
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="本金：" prop="operAmt">
                                    <el-input v-model="form.re.operAmt" placeholder="输入本金" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="金币：" prop="presentCoins">
                                    <el-input v-model="form.re.presentCoins" placeholder="输入金币" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="积分：" prop="point">
                                    <el-input v-model="form.re.point" placeholder="输入积分" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="赠送金额：" prop="presentAmt">
                                    <el-input v-model="form.re.presentAmt" placeholder="输入赠送金额" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="原订单号：" prop="referCode">
                                    <el-input v-model="form.re.referCode" placeholder="输入原订单号" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="调账门店：" prop="orgName">
                                    {{ form.re.orgName }}
                                    <!-- <el-select v-model="form.re.orgName" filterable clearable placeholder="选择调账门店">
                                        <el-option v-for="item in shop_options" :label="item.label" :value="item.value" />
                                    </el-select> -->
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="调账原因：" prop="tzyy">
                                    <el-select v-model="form.re.reason" filterable clearable placeholder="选择调账原因">
                                        <el-option v-for="item in reason_options.re" :label="item.name"
                                            :value="item.code" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                </el-form>
            </div>

            <div class="footer-box">
                <el-button class="cancel" @click="handleCancel">取消</el-button>
                <el-button class="submit" @click="handleSubmit">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script setup>
import Api from '@/api'
import { getLocalIPv4 } from "@/utils/getip.js";
import ls from '@/lib/ls'
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    }
})
const visible = toRef(props, 'visible')
const rules = reactive({
    source: [{ required: true, message: '请选择来源', trigger: 'change' },],
    payType: [{ required: true, message: '请选择支付方式', trigger: 'change' },],
    operAmt: [{ required: true, message: '请输入本金', trigger: 'change' },],
    presentCoins: [{ required: true, message: '请输入金币', trigger: 'change' },],
    point: [{ required: true, message: '请输入积分', trigger: 'change' },],
    presentAmt:[{ required: true, message: '请输入赠送金额', trigger: 'change' },],
    // orgName: [{ required: true, message: '请选择调账门店', trigger: 'change' },],
})
// 获取来源options
let source_options = reactive({ re: [] })
const get_source_options = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": { parentCode: 570 } }).then(res => {
        console.log('获取来源options res :>> ', res);
        source_options.re = res.result
    })
}
onMounted(() => {
    get_source_options()
})
// 获取支付方式options
let payType_options = reactive({ re: [] })
const get_payType_options = (params) => {
    const data = {
        parentCode: '569'
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": data }).then(res => {
        console.log('获取支付方式options res :>> ', res);
        payType_options.re = res.result
    })
}
onMounted(() => {
    get_payType_options()
})

// 获取调账原因options
let reason_options = reactive({ re: [] })
const get_reason_options = (params) => {
    const data = {
        parentCode: '568'
    }
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": data }).then(res => {
        console.log('获取调账原因options res :>> ', res);
        reason_options.re = res.result
    })
}
onMounted(() => {
    get_reason_options()
})

let shop_options = reactive([
    { label: '店1', value: '1' },
    { label: '店2', value: '2' },
    { label: '店2', value: '3' },
])
let user = reactive({
    re: {}
})
let currentCard = ref(0)
// 打开窗口
const open = (data) => {
    // console.log('data :>> ', data);
    user.re = data.user
    currentCard.value = data.currentCard
    // console.log(info.re, currentCard.value, info.re.cardList[0])
}
// 暴露方法
defineExpose({ open })

let form = reactive({
    re: {
        type: 1,
        orgName: ls.get('USER_INFO').orgName
    }
})
// 点击调账类型
// 点击储值方案
let isActive = ref(1)
const handleType = (i) => {
    isActive.value = i
    form.re.type = i
}

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}

//获取ip地址
const ip = ref("");
getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });
// 确认
const formRef = ref()
const tiaoflag = ref(false)
const handleSubmit = (params) => {
    formRef.value.validate(valid => { //表单验证
        if (valid) {
            if(form.re.operAmt < 0) return ElNotification({
                    title: '提示',
                    message: '本金不能为负数',
                    type: 'warning',
                })
            if(form.re.presentCoins < 0) return ElNotification({
                title: '提示',
                message: '金币不能为负数',
                type: 'warning',
            })
            if(form.re.point < 0) return ElNotification({
                    title: '提示',
                    message: '积分不能为负数',
                    type: 'warning',
            })
            if(tiaoflag.value){
                ElNotification({
                    title: '提示',
                    message: '加载中',
                    type: 'success',
                })
                return
            }
            tiaoflag.value = true
            let data = {
                no: user.re.cardList[currentCard.value].cardNo,
                type: form.re.type,
                source: form.re.source,
                operAmt: form.re.operAmt,
                point: form.re.point,
                presentAmt:form.re.presentAmt,
                presentCoins: form.re.presentCoins,
                reason: form.re.reason,
                payType: form.re.payType,
                orgName: form.re.orgName,
                referCode: form.re.referCode,
            }
            console.log('data :>> ', data);
            // return
            Api.Common.PcObjProcess.Do({ "functionName": "ChangeMemberAmt", "orgCode": "0004", "contentData": { ...data, "ip": ip.value } }).then(res => {
                console.log('新增res :>> ', res);
                ElNotification({
                    title: '提示',
                    message: '调账成功',
                    type: 'success',
                })
                tiaoflag.value = false
                emit('emitSubmit', 'Submit')
            }).catch(err=>{
                tiaoflag.value = false
            })
        }
    })

}
</script>
  
<style  lang="scss" scoped>
    @import '@/styles/com_style_input.css';
.dialog-box {

    ::v-deep {
        .el-dialog {
            width: 1000px;
            // height: 800px;
            border-radius: 16px;
            padding-left: 60px;
            padding-right: 60px;
            padding-bottom: 40px;
        }

        .el-dialog__title {
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 36px;
            // padding-left: 60px;
        }

        .el-divider {
            margin: 0;
        }
    }

    .footer-box {
        // margin-top: 60px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }
}

.dialog {
    .my-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-tip {
            font-weight: 400;
            font-size: 16px;
            color: #FF6A00;
        }
    }

    .dialog-content {
        padding: 20px 125px 0px 170px;

        .rule-box {
            .title {
                font-weight: bold;
                font-size: 18px;
                color: #212121;
                margin-bottom: 10px;
            }

            .content {
                margin-bottom: 3px;
                padding-left: 20px;
                font-weight: 400;
                font-size: 16px;
                color: #212121;
            }
        }

        .type-box {
            ::v-deep {
                .el-form-item__label {
                    font-weight: bold;
                    font-size: 18px;
                    color: #212121;
                    line-height: 60px;
                }
            }

            .button-box {
                display: flex;
                // justify-content: space-between;

                .button {
                    width: 215px;
                    height: 60px;
                    background: #E6E6E6;
                    border-radius: 8px;
                    font-weight: 400;
                    font-size: 18px;
                    color: #666666;
                    border: 0;
                }

                .active {
                    background: #FFE566;
                    font-size: 18px;
                    color: #212121;
                }
            }
        }

        .form {
            // display: flex;
            // justify-content: space-between;
            // flex-wrap: wrap;

            ::v-deep {
                .el-form-item__label {
                    line-height: 48px;

                }

                .el-select__wrapper {
                    height: 48px;
                    // background: #F9F9F9;
                    border-radius: 8px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                }

                .el-input__wrapper {
                    height: 48px;
                    // background: #F9F9F9;
                    border-radius: 8px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                }
            }
        }
    }
}
</style>
  